<template>
    <div class="my_body app-container">
        <div class="left_box">
            <div class="left_box_ex_info">
                <el-row>
                    <h1 style="margin: 0;padding: 0;">{{ exam.name }}</h1>
                </el-row>
                <el-row>
                    <h2 class="timer_class">
                        <span>答题用时：{{ secondFormat(duration) }}</span>
                    </h2>
                </el-row>
            </div>
            <div class="left_box_questions">
                <div style="margin-bottom: 15px">
                    <el-tag type="success" style="margin-right: 10px;">正确</el-tag>
                    <el-tag type="danger">错误</el-tag>
                </div>
                <div style="margin: 0;padding: 0;">
                    <el-descriptions style="margin: 0;padding: 0;" size="mini" :column="7" :colon="false">
                        <el-descriptions-item v-if="isNotEmpty(answers)" v-for="(id,index) in questionIds">
                            <el-button :type="answers[id].isRight != '2' ? 'success' : 'danger'" class="question_id_class" @click="page = index" plain>{{index + 1}}</el-button>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
                <el-divider>{{ page + 1 }} / {{ questionIds.length }}</el-divider>
            </div>
        </div>
        <div class="right_box">
            <div class="right_box_question">
                <div class="question_label">
                    <span>问题</span>
                </div>
                <div class="question_content">
                    {{page+1}}. {{question.content}}
                </div>
                <div class="question_label">
                    <span>选项({{question.type=='1' ? '单' : '多'}}选题)</span>
                </div>
                <div class="question_option">
                    <el-form label-width="0px" size="mini">
                        <el-form-item style="margin-bottom: 10px;" v-for="option in question.exQuestinOptionList">
                            <span>{{option.index}}. {{option.content}}</span>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="question_option">
                    <el-form v-if="isNotEmpty(answers) && isNotEmpty(question)" label-width="100px" size="mini" label-position="left">
                        <el-form-item style="margin-bottom: 10px;" label="回  答：">
                            <el-tag v-if="answers[questionIds[page]].isRight!='2'" type="success">正确</el-tag>
                            <el-tag v-else type="danger">错误</el-tag>
                        </el-form-item>
                        <el-form-item style="margin-bottom: 10px;" label="我的答案：">
                            {{myAnswers(answers[questionIds[page]],question.exQuestinOptionList)}}
                        </el-form-item>
                        <el-form-item style="margin-bottom: 10px;" label="正确答案：">
                            <span v-for="option in question.exQuestinOptionList">
                                {{option.right == '1' ? option.index : ''}}
                            </span>
                        </el-form-item>
                        <el-form-item style="margin-bottom: 10px;" label="解析：">
                            <el-tag v-if="isNotEmpty(question.info)" style="padding: 0;margin: 0;font-size: 18px;">{{ question.info }}</el-tag>
                        </el-form-item>
                    </el-form>

                </div>
            </div>
            <div class="right_box_page">
                <center>
                    <el-button type="primary" icon="el-icon-caret-left" @click="--page" v-if="page>0"
                               style="margin-right: 10px;font-size: 25px" plain>上一题</el-button>
                    <el-button type="primary" style="font-size: 25px;" @click="++page" v-if="page<questionIds.length-1"
                               plain>下一题 <i class="el-icon-caret-right"></i></el-button>
                </center>
            </div>
        </div>
    </div>
</template>
<script>
import {getExercise} from "@/api/ex/exercise";
import {getEx_record} from "@/api/ex/ex_record";
import {getQuestion} from "@/api/ex/question";
import {parseArr} from "@/utils/zzDouUtils/arrayUtil";
import { isNotEmpty, isNull} from "@/utils/zzDouUtils/objUtil";
import {secondFormat} from '@/utils/zzDouUtils/dateUtil';

export default {
    name: "Exercise_Check",
    data() {
        return {
            id: null,
            isExam: null,
            exam: {},
            duration: 0,
            questionIds: [],
            answers: {},
            answerMap: {},
            page: 0,//翻页下标
            question: {},
        };
    },
    created() {
        this.id = this.$route.params.exId;
        this.isExam = this.$route.params.isExam == '1';
        this.getExBean();
    },
    methods: {
        isNotEmpty,
        secondFormat,
        /** 查询题库详情 */
        async getExBean() {
            const response = this.isExam ? await getEx_record(this.id) : await getExercise(this.id);
            this.duration = response.data.answerTime;
            this.answers = response.data.examQuestions;
            if (this.isExam){
                this.exam = response.data.exam;
                this.questionIds = response.data.exam.questionIds;
            }else {
                this.exam = response.data;
                this.questionIds = response.data.questionIds;
            }
            this.paging();
        },
        /** 翻页 */
        paging() {
            const id = this.questionIds[this.page];
            getQuestion(id).then(response => {
                this.question = response.data;
            })
        },
        /** 我的答案 */
        myAnswers(answersOptions,options){
            if (isNull(answersOptions) || isNull(options)){
                return '';
            }
            const a = parseArr(answersOptions.answers);
            let str = '';
            let obj = {};
            for (let i = 0; i < options.length; i++) {
                obj[options[i].id] = options[i].index;
            }
            for (let i = 0; i < a.length; i++) {
                if (!isNull(obj[a[i]])){
                    str += obj[a[i]] + ' ';
                }
            }
            return str;
        }
    },
    watch: {
        page(n, o) {
            if (n<0){
                this.page = 0
            }else if (n>this.questionIds.length-1){
                this.page = this.questionIds.length-1;
            }
            this.paging();
        },
    }
};
</script>
<style>
.my_body {
    width: 100%;
    height: 900px;
    background: #F4F4F4;
}

.left_box { /* 左边训练信息和题目个数大盒子 */
    float: left;
    width: 29%;
    height: 100%;
    text-align: center;
}

.left_box_ex_info { /* 左边上部分训练信息盒子 */
    width: 100%;
    height: 210px;
    padding-top: 66px;
    border-radius: 3.5%; /* 圆角 */
    background: #FFFFFF;
}

.left_box_questions { /* 左边下部分题目盒子 */
    width: 100%;
    height: 600px;
    margin-top: 30px;
    border-radius: 3%; /* 圆角 */
    background: #FFFFFF;
    text-align: center;
    padding-top: 7px;
}

.right_box { /* 右边题目信息大盒子 */
    float: left;
    width: 69%;
    margin-left: 20px;
    height: 100%;
}

.right_box_question { /* 右边上部分题目 */
    /*margin-top: 8%;*/
    width: 100%;
    height: 700px;
    border-radius: 1.5%; /* 圆角 */
    background: #FFFFFF;
}

.right_box_page { /* 右边下部分翻页 */
    margin-top: 0px;
    width: 100%;
}

.question_id_class { /* id按钮 */
    width: 56px;
    text-align: center;
}

.timer_class { /* 计时器 */
    margin: 0;
    padding: 0;
    margin-top: 20px;
    color: red;
    font-weight: bold;
}

.submit_class { /* 交卷 */
    font-size: 34px;
    margin-top: 25px;
    font-family: 仿宋;
    font-weight: bold;
}

.question_label{ /* 作答区 标题 */
    margin: 0 auto;
    width: 100%;
    line-height:50px;
    height: 50px;
    font-size: 17px;
    font-weight: bold;
    background: #ECF4FF;
    padding-left: 10px;
}
.question_content{ /* 作答区 内容 */
    font-size: 27px;
    font-family: 楷体;
    padding: 10px;
    line-height: 55px;
}
.question_option{ /* 作答区 选项 */
    padding: 10px;
}
.question_option .el-checkbox__label{
    font-size: 20px;
}
.question_option .el-radio__label{
    font-size: 20px;
}
</style>
